<template>
  <el-dialog
    v-model="dialogVisible"
    title="终端快捷码"
    width="430"
    class="qc-custom-dialog"
  >
    <el-scrollbar>
      <div class="code-info">
        <el-form
          ref="comTcpRef"
          :model="ruleForm"
          label-width="80px"
          class="edit-form-wrap"
        >
          <el-form-item label="电桩编码" class="bottom-wrap">
            <div>{{ ruleForm.equipmentCode }}</div>
          </el-form-item>
        </el-form>
        <Combination
          ref="comCodeRef"
          :items="codeItem"
          :comData="ruleForm.codes"
          :rules="codeRules"
          :size="1"
          :ishidePM="true"
        ></Combination>
      </div>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="dialog-price">
import Combination from '@/components/combination/combination.vue';
import { FormRules } from 'element-plus';
import { IS_NUMBER_5 } from '@/utils/verify';
import {
  queryShortCodeByEquipmentId,
  updateShortCodeByEquipmentId,
} from '@/service/apis/pile';

let dialogVisible = ref(false);
const comCodeRef = ref();

const ruleForm = reactive({
  id: '',
  equipmentCode: '',
  codes: [] as any,
});

const codeItem = reactive([
  {
    comName: 'input',
    label: '终端',
    labelWidth: 80,
    prop: 'shortcutCode',
    width: 240,
    props: {
      maxlength: 5,
      placeholder: '请输入快捷充电码',
    },
  },
]);

const codeRules = reactive<FormRules>({
  shortcutCode: [
    { required: true, message: '请输入快捷充电码', trigger: 'blur' },
    {
      pattern: IS_NUMBER_5,
      message: '请输入正确的快捷充电码，5位数字',
      trigger: 'blur',
    },
  ],
});

const getShortCode = () => {
  queryShortCodeByEquipmentId({ id: ruleForm.id }).then((res: any) => {
    if (res) {
      ruleForm.equipmentCode = res.equipmentCode;
      const name = res.equipmentName;
      if (res.connectorList?.length > 0) {
        ruleForm.codes = [];
        res.connectorList.forEach((item: any, index: number) => {
          ruleForm.codes.push({
            id: item.id,
            shortcutCode: item.shortcutCode || '',
          });
          nextTick(() => {
            comCodeRef.value.setLabel(
              index,
              0,
              `${item.connectorName.replace(name, '')}终端`
            );
          });
        });
      }
    }
  });
};

// 显示弹框
const show = (row: any) => {
  ruleForm.id = row.id;
  nextTick(() => {
    comCodeRef.value.clearData();
  });
  getShortCode();
  dialogVisible.value = true;
};
// 关闭弹框
const hide = () => {
  dialogVisible.value = false;
};

const emit = defineEmits(['update-list']);
const onSubmit = async () => {
  if (!comCodeRef.value) return;
  await comCodeRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      const form = {
        id: ruleForm.id,
        connectorList: [] as any,
      };
      const data = comCodeRef.value.getData();
      data.forEach((item: any, index: number) => {
        form.connectorList.push({
          id: ruleForm.codes[index].id,
          shortcutCode: item.shortcutCode,
        });
      });
      console.log('form---', form);
      updateShortCodeByEquipmentId(form).then((res: any) => {
        emit('update-list');
        hide();
      });
    } else {
      console.log('error submit!', fields);
      for (const key in fields) {
        if (fields[key]) {
          comCodeRef.value.scrollToField(key);
          break;
        }
      }
    }
  });
};

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.code-info {
  max-height: 50vh;
}
</style>